<script setup lang="ts" name='check_apply_detail'>
import { service } from "@/utils/request";
import { ElMessage } from "element-plus";
import { ref, reactive, onMounted } from "vue";

const { itemId, update, currentStatus } = defineProps<{
    itemId: string;
    currentStatus: string;
    update?: () => void
}>()

const server = import.meta.env.VITE_BASE_SERVER

const readonly = ref(false)
const form = reactive<{
    itemId: string,
    result: string,
    uploadIds: any[]
}>({
    itemId: itemId,
    result: '',
    uploadIds: []
})




import { ElMessageBox } from 'element-plus'

import type { UploadProps, UploadUserFile, UploadFile } from 'element-plus'


interface UploadFileItem {
    uploadId: string;
    name: string;
    url: string;
}

//已上传的文件列表
const fileList = ref<UploadFileItem[]>([
    // {
    //     name: 'element-plus-logo.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
    // {
    //     name: 'element-plus-logo2.svg',
    //     url: 'https://element-plus.org/images/element-plus-logo.svg',
    // },
])

const handleSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFile[]) => {

    /**
     * ext ".png"
        originName "微信图片_20241017140004.png"
        path "3bf7d62817af48c1a2c80c503700ee15..png"
        upTime "2024-12-06 09:07:22.745"
        upUser "admin"
        uploadId 2
     */
    const { originName, path, uploadId } = response.data;


    fileList.value.push({
        uploadId: uploadId,
        name: originName,
        url: response.data.url
    })
}

const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles);

    //js -- java 
}

const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
    console.log(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
    ElMessage.warning(
        `The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length
        } totally`
    )
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
    return ElMessageBox.confirm(
        `Cancel the transfer of ${uploadFile.name} ?`
    ).then(
        () => true,
        () => false
    )
}






function saveCheckResult() {

    let uploadIds = fileList.value.map(item => item.uploadId);
    form.uploadIds = uploadIds;

    service.get<boolean>('/yiji/saveCheckResult', { params: form }).then((success: boolean) => {
        if (success) {

            ElMessage({
                message: '执行成功',
                type: 'success'
            })
            if (update) {
                update();
            }

        } else {
            ElMessage({
                message: '执行失败',
                type: 'error'
            })
        }
    })

}


function queryDetail() {
    //已执行的检查，查询检查结果
    if (currentStatus == "3") {
        // form.result = '已填写的结果...'

        readonly.value = true

        service.get('/yiji/queryCheckResult?itemId=' + itemId).then((result: any) => {
            const { applyPO, uploads } = result
            form.result = applyPO.result;

            uploads.forEach((uploads: any) => {
                fileList.value.push({
                    uploadId: uploads.uploadId,
                    name: uploads.originName,
                    url: ''
                })
            })

        })
    }
}

onMounted(() => {
    queryDetail();
})








</script>


<template>

    <!-- 检查项目填写结果的详情页面 :{{ itemId }} -->


    <el-form>
        <el-form-item label="检查结果">
            <el-input v-model="form.result" :readonly="readonly" />

        </el-form-item>


        <el-form-item label="上传检查影响">
            <el-upload class="upload-demo" with-credentials :action="`${server}/upload/upload`" multiple
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="10"
                :on-success="handleSuccess" :on-exceed="handleExceed">
                <el-button type="primary">请选择文件</el-button>
                <template #tip>
                    <div class="el-upload__tip">
                        只能上传图片 不能超过 3M
                    </div>
                </template>
            </el-upload>

            <div v-for=" file in fileList ">
                <img :src="`http://localhost:8080/his/down/download?uploadId=${file.uploadId}`" width="100%">


            </div>

        </el-form-item>
        <el-form-item>
            <el-button type="success" size="small" @click="saveCheckResult">提交</el-button>

        </el-form-item>
    </el-form>





</template>


<style scoped></style>